<template>
	<view>
		<view class="navigation" @tap="backref()">
			<view class="navigation_back">
				<uni-icons type="back" size="24" color="#fff"></uni-icons>
			</view>
			<view class="navigation_title">
				我的地址
			</view>
		</view>
		<view class="address_con">
			<view class="address_item" v-for="(item,index) in addressList" :key="index">
				<view class="address_item_hd">
					<view class="address_item_name">
						{{item.userName}}
					</view>
					<view class="address_item_phone">
						{{item.userPhone}}
					</view>
					<view class="address_item_default" v-if="item.isDefault == 1">
						默认
					</view>
				</view>
				<view class="address_item_bd">
					{{item.userAddress}}
				</view>
				<view class="address_item_edit" @tap="editAddress(item)">
					<image src="../../../static/image/memberCenter/addressEdit.svg" mode=""></image>
				</view>
			</view>
		
		
			<view class="address_add" @tap="addAddress()">
				<view class="" style="padding: 0 24rpx;">
					<button>新增地址</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAddressList } from '../../../api/api.js'
	export default {
		data() {
			return {
				addressList:[]
			};
		},
		methods:{
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 新增地址
			addAddress(){
				uni.navigateTo({
					url:'/pages/memberCenter/address/addAddress'
				})
			},
			
			// 编辑地址
			editAddress(data){
				uni.navigateTo({
					url:'/pages/memberCenter/address/editAddress?data=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		},
		onShow() {
			getAddressList().then(res => {
				this.addressList = res.data
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.navigation {
		width: 100%;
		height: 260rpx;
		background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 70rpx;
		}

		.navigation_title {
			color: #fff;
			font-size: 36rpx;
		}
	}
	.address_con{
		position: relative;
		z-index: 2;
		padding: 40rpx 32rpx 180rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #F4F4F4;
		margin-top: -100rpx;
		.address_item{
			position: relative;
			border-radius: 12rpx;
			padding: 26rpx;
			margin-bottom: 26rpx;
			background-color: #fff;
			.address_item_hd{
				display: flex;
				align-items: center;
				.address_item_name{
					color: #2E343A;
					font-size: 26rpx;
					font-weight: 500;
				}
				.address_item_phone{
					color: #2E343A;
					font-size: 26rpx;
					font-weight: 500;
					margin-left: 15rpx;
				}
				.address_item_default{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 94rpx;
					height: 36rpx;
					background: rgba(255, 195, 0, 1);
					color: rgba(255, 141, 26, 1);
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
			.address_item_bd{
				margin-top: 20rpx;
				color: #2E343A;
			}
			.address_item_edit{
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				image{
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
	}
	.address_add {
		position: fixed;
		left: 0;
		bottom: 50rpx;
		width: 100%;
	
		button {
			height: 80rpx;
			background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
			color: #fff;
			font-size: 28rpx;
			font-weight: 700;
			border: 0;
			line-height: 80rpx;
			border-radius: 80rpx;
		}
	}
</style>
